<template>
	<view class="pages">
		<view class="lists">
			<view class="list padding font-14 margin-bottom-sm" v-for="(item , index) in list" :key="index" @click="jump(item.id)">
				<view class="list-top">
					<view class="list-top-left">
						<view class="time">
							{{ item.time }}
						</view>
						<view class="status">
							<uni-tag :text="item.statusDes" size="small" :type="statusType[type][item.status]"></uni-tag>
						</view>
					</view>
					<uni-icons type="right" size="16"></uni-icons>
				</view>
				<view class="list-con padding-bottom-sm">
					<view class="address margin-top-sm">
						<uni-steps :options="item.address" active-color="#007AFF" :active="item.address.length" direction="column" />
					</view>
					<template v-if="item.isUpMileageStatus == 1">
						<view class="list-con-mileage margin-top-sm">
							起始里程：{{ item.startMileage }}
						</view>
						<view class="list-con-mileage margin-top-sm">
							终止里程：{{ item.endMileage }}
						</view>
					</template>
					<view class="list-con-bottom margin-top-sm" v-if="item.vehicle.brand && item.driver.name">
						<view class="vehicle list-con-bottom-con">
							车牌：{{ item.vehicle.brand }}
						</view>
						<view class="driver list-con-bottom-con margin-left-sm">
							司机：{{ item.driver.name }} <text class="margin-left-sm phone" @click.stop="makePhoneCall(item.driver.phone)">{{ item.driver.phone }}</text>
						</view>
					</view>
				</view>
				<view class="list-bottom padding-top-sm">
					<view class="list-bottom-left" v-if="type == 1">
						<view class="text">
							已占座：{{ item.reserveSeatNum }}
						</view>
						<view class="text margin-left-sm">
							未占座：{{ item.remainderSeatNum }}
						</view>
					</view>
					<view class="list-bottom-left" v-else>
						<view class="text">
							占座：{{ item.occupaSeatNum }}
						</view>
						<view class="text margin-left-sm">
							是否有货物：{{ item.isGoods == '0' ? '没有' : '有' }}
						</view>
					</view>
					<view class="list-bottom-right">
						<view class="btn" v-if="isEdit">
							<button type="primary" size="mini" @click.stop="edit(item.id , index, item.remainderSeatNum)" v-if="item.isUpdateStatus == 1 && !roles.includes('driver')">修改</button>
						</view>
						<view class="btn margin-left-sm" v-if="type == 1 && isPin">
							<button type="primary" size="mini" @click.stop="carpool(item.id)" v-if="item.remainderSeatNum">拼车</button>
							<button type="default" size="mini" @click.stop="carpool(0)" v-else>拼车</button>
						</view>
						<view class="btn margin-left-sm" v-if="item.isDelStatus == 1 && !roles.includes('driver') && !isPin">
							<button type="primary" size="mini" @click.stop="cancel(item.id)">取消</button>
						</view>
						<view class="btn margin-left-sm" v-if="item.status == 2">
							<button type="primary" size="mini" @click.stop="mileage(item)">里程</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="修改" @confirm="dialogConfirm" @close="dialogClose">
				<view class="popup-form">
					<view class="popup-form-line">
						<view class="form-line-text font-12">
							车牌：
						</view>
						<view class="form-line-select">
							<uni-data-select v-model="vehicleIndex" :localdata="vehicle" @change="changeVehicle" placeholder="请选择车辆"></uni-data-select>
						</view>
						
					</view>
					<view class="popup-form-line">
						<view class="form-line-text font-12">
							姓名：
						</view>
						<view class="form-line-select">
							<uni-data-select v-model="peopleIndex" :localdata="people" @change="changePeople"
							placeholder="请选择用户"></uni-data-select>
						</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popupMileage" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="里程" @confirm="confirmMileage" @close="closeMileage">
				<view class="popup-form">
					<view class="popup-form-line padding-top-sm padding-bottom-sm">
						<view class="form-line-text font-12">
							起始里程：
						</view>
						<view class="form-line-select">
							<input class="uni-input font-12" type="number" placeholder="选择输入起始里程" v-model="item.startMileage" />
						</view>
					</view>
					<view class="popup-form-line padding-top-sm padding-bottom-sm">
						<view class="form-line-text font-12">
							终止里程：
						</view>
						<view class="form-line-select">
							<input class="uni-input font-12" type="number" placeholder="选择输入终止里程" v-model="item.endMileage" />
						</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<kevy-empty :show="true" type="data" v-if="page <= 2 && status == 'no-more' && list.length == 0"></kevy-empty>
		<uni-load-more :status="status" v-else></uni-load-more>
	</view>
</template>

<script>
	import { makePhoneCall,parseTime } from '@/utils/common'
	import { getList,applyList,getInfoApply,cancelApply,editStroke,upMileage } from '@/api/system/stroke'
	import { getList as vehicleList } from '@/api/system/vehicle'
	import { getList as driverList } from '@/api/system/driver'
	import storage from '@/utils/storage'
	export default {
		name: "MakeList",
		props: {
			// type: Number,
			isPin: Boolean,
			isEdit: Boolean,
		},
		data() {
			return {
				page: 1,
				type: 1,
				list: [],
				item:{startMileage: '', endMileage: ''},
				status: 'more',
				id: 0,
				vehicleIndex: '', 
				vehicle: [],
				peopleIndex: '',
				people: [],
				statusType: {
					1: {0: 'warning', 1: 'success', 2: 'error'},
					2: {0: 'warning', 1: 'success', 2: 'error'}
				},
				queryStatus: false,
				row: {}, // 选中行数据
			};
		},
		computed: {
			roles(){ // 用户角色
				return storage.get('vuex_roles');
			},
		},
		watch: {
			type(newValue, oldValue) {
				this.init();
			}
		},
		created() {
			this.init();
		},
		methods: {
			/**
			 * 初始化
			 */
			init(){
				this.page = 1;
				this.list = [];
				
				if(this.type == 1){
					this.getList(1);
				}else{
					this.applyList(1);
				}
			},
			/**
			 * 上拉加载
			 */
			getLastPageData(){
				if(this.status != 'no-more'){
					if(this.type == 1){
						this.getList(this.page);
					}else{
						this.applyList(this.page);
					}
				}
			},
			/**
			 * 行程列表
			 * @param {Object} page
			 */
			getList(page){
				this.status = 'loading';
				
				if(page == 1){
					this.list = [];
				}	
				
				getList({
					pageNum: page,
					isPinStatus: this.isPin ? 1 : 0,
				}).then(res => {
					this.page++;
					this.status = res.nextPage > 0 ? 'more' : 'no-more';
					this.handleList(res.list);
				}).catch(err => {
					console.log('err' , err);
				});
			},
			/**
			 * 约车列表
			 * @param {Object} page
			 */
			applyList(page){
				this.status = 'loading';
				
				if(page == 1){
					this.list = [];
				}
				
				applyList(page).then(res => {
					this.page++;
					this.status = res.nextPage > 0 ? 'more' : 'no-more';
					this.handleList(res.list);
				}).catch(err => {
					console.log('err' , err);
				});
			},
			/**
			 * 处理列表
			 * @param {Object} list
			 */
			handleList(list){
				console.log();
				list.forEach(item => {
					let address = [{title: item.startLocation}];

					if(item.transitPlace){
						item.transitPlace.forEach(res => {
							address.push({title: res});
						});
					}
					
					address.push({title: item.endLocation});
					
					let vehicle = {id: item.carId, brand: item.licensePlate};
					let driver = {id: item.driverId, name: item.driverName, phone: item.driverPhone};
					
					this.list.push({
						id: item.id,
						carId: item.carId,
						time: item.startTime + ' - ' + item.endTime,
						status: this.type == 1 ? item.useCarStatus : item.taskStatus,
						statusDes: this.type == 1 ? item.useCarStatusDes: item.taskStatusDes,
						address: address,
						vehicle: vehicle,
						driver: driver,
						isGoods: item.isGoods,
						remainderSeatNum: parseInt(item.remainderSeatNum),
						reserveSeatNum: parseInt(item.reserveSeatNum),
						occupaSeatNum: parseInt(item.occupaSeatNum),
						isUpdateStatus: item.isUpdateStatus,
						isDelStatus: item.isDelStatus,
						isUpMileageStatus: item.isUpMileageStatus,
						startMileage: item.startMileage,
						endMileage: item.endMileage,
					});
				});
			},
			/**
			 * 获取车辆列表
			 */
			getVehicleList(month){
				vehicleList(month).then(res => {
					this.vehicle = [{
						value: this.row.vehicle.id,
						text: this.row.vehicle.brand
					}];
					
					res.data.forEach(item => {
						this.vehicle.push({
							value: item.id,
							text: item.licensePlate
						});
					});
				}).catch(err => {
					console.log('获取车辆列表失败' , err);
				});
			},
			/**
			 * 获取司机列表
			 * @param {Object} month
			 */
			getDriverList(month){
				driverList(month).then(res => {
					console.log('获取司机列表成功' , res);
					this.people = [{
						value: this.row.driver.id,
						text: this.row.driver.name,
						phone: this.row.driver.phone,
					}];
					
					res.data.forEach(item => {
						this.people.push({
							value: item.id,
							text: item.driverName,
							phone: item.phnoeNum
						});
					});
				}).catch(err => {
					console.log('获取司机列表失败' , err);
				});
			},
			/**
			 * 跳转页面
			 */
			jump(id){
				this.$tab.navigateTo(`/pages/make/info?id=${id}`);
				// if(this.type == 1){
				// 	this.$tab.navigateTo(`/pages/make/info?id=${id}`);
				// }else{
				// 	this.$tab.navigateTo(`/pages/make/addInfo?id=${id}`);
				// }
			},
			/**
			 * 修改
			 */
			edit(id, index , remainderSeatNum){
				this.row = this.list[index];
				if(this.roles.includes('carAdmin') || this.roles.includes('admin')){
					this.$refs.popup.open();
					
					let month = parseTime(this.row.time.split(' - ')[0] , '{y}-{m}-{d}');
					this.getVehicleList(month);
					this.getDriverList(month);
					
					if(this.row.carId){
						this.id = id;
						this.vehicleIndex = this.row.vehicle.id;
						this.peopleIndex = this.row.driver.id;
					}
				}
				else{
					this.$tab.navigateTo(`/pages/make/add?id=${id}&remainderSeatNum=${remainderSeatNum}`);
				}
			},
			/**
			 * 拼车
			 */
			carpool(id){
				if(id > 0){
					this.$tab.navigateTo(`/pages/make/carpooling?id=${id}`);
				}
			},
			/**
			 * 取消
			 */
			cancel(id){
				this.$modal.confirm('是否确认取消！').then(() => {
					console.log('取消');
					getInfoApply(id).then(res => {
						console.log('根据行程ID获取申请信息' , res);
						cancelApply(res.data.id).then(() => {
							this.$modal.msgSuccess('取消成功' , () => {
								setTimeout(() => {
									this.init();
								} , 2000);
							})
						});
					});
				});
			},
			/**
			 * 打电话
			 * @param {Object} phone
			 */
			makePhoneCall(phone){
				makePhoneCall(phone);
			},
			/**
			 * 同意修改
			 */
			dialogConfirm(){
				if(!this.vehicleIndex){
					this.$modal.msgError("请选择车辆");
				}else if(!this.peopleIndex){
					this.$modal.msgError("请选择司机");
				}else{
					if(this.vehicleIndex != this.row.vehicle.id || this.peopleIndex != this.row.driver.id){
						if(!this.queryStatus){
							this.queryStatus = true;
							
							editStroke({
								id: this.id,
								carId: this.vehicleIndex,
								driverId: this.peopleIndex
							}).then(res => {
								this.queryStatus = false;
								this.$modal.msgSuccess('修改成功' , () => {
									setTimeout(() => {
										this.init();
									} , 2000);
								});
								console.log('修改成功' , res);
							}).catch(err => {
								this.queryStatus = false;
								console.log('修改司机或车辆信息失败' , err);
							});
						}
					}
				}
			},
			/**
			 * 关闭弹窗
			 */
			dialogClose(){
				this.id = 0;
				this.vehicleIndex = 0;
				this.peopleIndex = 0;
			},
			/**
			 * 车辆切换
			 * @param {Object} e
			 */
			changeVehicle(e) {},
			/**
			 * 司机切换
			 * @param {Object} e
			 */
			changePeople(e){},
			/**
			 * 里程
			 * @param {Object} info
			 */
			mileage(info){
				this.item = info;
				this.$refs.popupMileage.open();
			},
			confirmMileage(){
				console.log('confirmMileage', this.item);
				if(!this.item.startMileage){
					this.$modal.msgError("请输入起始里程");
				}else if(!this.item.endMileage){
					this.$modal.msgError("请输入终止里程");
				}else{
					this.$modal.loading("请求中");
					upMileage([this.item]).then(res => {
						this.$modal.closeLoading();
						if(res.code == 200){
							this.$modal.msgSuccess('更新成功', () => {
								setTimeout(() => {
									this.init();
								} , 2000);
							});
						}else{
							this.$modal.msgError(res.msg);
						}
					});
				}
			},
			closeMileage(){
				this.item = {startMileage: '', endMileage: ''};
			}
		}
	}
</script>

<style lang="scss">
	.flexCenter {
		display: flex;
		align-items: center;
	}
	
	.flexCenterBetween {
		@extend .flexCenter;
		justify-content: space-between;
	}
	
	::v-deep .uni-steps__column-text{
		border: none;
	}
	
	::v-deep .uni-steps__column-title{
		color: #000000 !important;
	}
	
	::v-deep .uni-steps__column-container{
		width: 5px;
		margin-right: 20upx;
	}
	
	.lists{
		.list{
			background-color: #FFFFFF;
			
			.list-top{
				@extend .flexCenterBetween;
				
				.list-top-left{
					@extend .flexCenter;
					
					.status{
						margin-left: 10upx;
						white-space: nowrap;
					}
				}
			}
			
			.list-con{
				.list-con-bottom{
					@extend .flexCenter;
					
					.phone{
						color: #007AFF;
					}
				}
			}
			
			.list-bottom{
				@extend .flexCenterBetween;
				border-top: 1px solid #E2E2E2;
				
				.list-bottom-left{
					@extend .flexCenter;
					color: #999999;
				}
				
				.list-bottom-right{
					@extend .flexCenter;
					justify-content: flex-end;
				}
			}
		}
	}

	.popup-form{
		width: 100%;
		
		.popup-form-line{
			@extend .flexCenterBetween;
			border-bottom: 1px solid #E2E2E2;
			
			&:last-child{
				border: none;
			}
			
			.form-line-select{
				flex: 1;
				
				::v-deep .uni-select{
					border: none;
				}
			}
		}
	}
</style>